import React from "react";
const ThemeContext = React.createContext("dark");
const ColorContext = React.createContext("red");
class App extends React.Component {
  constructor() {
    super();
    this._text_data = {};
    this.state = { count: 0 };
  }
  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };
  render() {
    console.log("render App");
    return (
      <ThemeContext.Provider value={this.state.count}>
        <ColorContext.Provider value="red">
          <button onClick={this.handleClick}>点我改变状态</button>
          <Toolbar />
        </ColorContext.Provider>
      </ThemeContext.Provider>
    );
  }
}
class Toolbar extends React.Component {
  shouldComponentUpdate() {
    return false;
  }
  render() {
    console.log("render Toolbar");
    return (
      <div>
        <ThemedButton />
      </div>
    );
  }
}

// <button>{count.toString()}</button>
function ThemedButton() {
  console.log("render ThemedButton");
  return (
    <ThemeContext.Consumer>
      {(value) => (
        <ColorContext.Consumer>
          {(color_value) => <button>{`${value}-${color_value}`}</button>}
        </ColorContext.Consumer>
      )}
    </ThemeContext.Consumer>
  );
}
export default App;
